<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/bootstrap-select.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/admin.css" type="text/css" media="screen" />
</head>
<body>
  <div id="loginMask">
    <div style="position:absolute;left:300px;top:200px;">
	    <div class="title">后台管理系统</div>
		<div id="idDiv_PWD_UsernameTb" class="row textbox">
			<input type="text" lang="en" name="userName" maxlength="113" placeholder="用户名">
		</div>
		<div style="display: none;" aria-live="assertive" aria-relevant="text" aria-atomic="true">
		  <div id="idTd_PWD_ErrorMsg_Password" class="errorDiv"></div>
		</div>
		<div class="row textbox">
			<input type="password" name="pwd" autocomplete="off" placeholder="密码">
		</div>
		<button action="login" style="width:90px;margin-top:20px;">登录</button><img src="images/loading.gif">
	</div>
  </div>
  
  <div id="adm-header">后台管理系统</div>
  <div id="main">
  <!--
    <div id="navWrapper">
		<div id="admNav">
		  <ul>
			<li><a class="active" tar="profile">概况</a></li>
			<li><a tar="member">成员</a></li>
			<li><a tar="groups">分组</a></li>
			<li><a tar="folders">团队文件夹</a></li>
			<li><a tar="account">账户</a></li>
			<li class="clear"></li>
		  </ul>
		</div>
	</div>
-->
	<div id="nav">
		<div class="logo"></div>
		<div class="nav-first nav-first-active" tar="profile">概况</div>
		<div class="nav-first" tar="member">成员</div>
		<div class="nav-first" tar="groups">分组</div>
		<div class="nav-first" tar="account">账户</div>
		<div class="nav-first" tar="notification">消息</div>
	</div>	
	<div id="content">
	  <div id="profilePanel" class="adm-tab">
	      <div class="adm-profile-chart"></div>
	  </div>
	  
	  <div id="memberPanel" class="adm-tab">
	    <div class="adm-member-toolbar" style="height:26px;padding:13px 16px;">
          <button>邀请成员</button>
		  <div class="search-bar">
			<input type="text" placeholder="搜索">
			<a class="search-bar-btn" href="javascript:void(0);"></a>
		  </div>
		</div>
		<div class="adm-member-header">
		  <div class="col col-photo">&#160;</div>
		  <div class="col col-member">成员</div>
		  <div class="col col-mail">EMAIL</div>
		  <div class="col col-role">身份</div>
		  <div class="col col-space">已使用空间</div>
		  <div class="col col-action">操作</div>
		  <div class="clear"></div>
		</div>
		<div class="adm-member-body"></div>
	  </div>
	  
	  <!-- Share folder panel begin -->
	  <div id="foldersPanel" class="adm-tab">
	    <div class="adm-folders-toolbar" style="height:26px;padding:13px 16px;">
		  <button class="">新建</button>
		  <button class="">显示已删除</button>
		  <button class="">共享设置</button>
		  <button class="">添加子文件夹</button>
		  <button class="">重命名</button>
		  <button class="">删除</button>
		  <button class="">恢复</button>
		  <button class="">彻底删除</button>
		</div>
		<div class="adm-folders-body">
		    <div class="adm-folders-item">
				<img src="images/folder2_32x32.png">
				<span>新建文件夹</span>
			</div>
		</div>
	  </div>
	  <!-- Share folder panel end -->
	  
	  <!-- Groups Panel begin -->
	  <div id="groupsPanel" class="adm-tab" >
	    <div class="adm-group-list-panel">
			<div class="adm-group-header">
			  <h4>分组列表</h4>
			  <div><button action="addGroup">新建分组</button></div>
			</div>
			<div class="adm-group-list"></div>
		</div>
		<div class="adm-group-detail">
	      <div class="adm-group-detail-header">
		    <div class="adm-group-detail-title"></div>
			<div class="adm-group-rename-wrap">
			  <input name="groupName" class="input-text" type="text" value="5656" style="height:16px">
			  <button action="doRenameGroup">确定</button>
			  <button action="cancelRenameGroup">取消</button>
			</div>
		  </div>
	      <div class="adm-group-detail-toolbar">
			  <button action="addMember">添加组员</button>	  
			  <button action="renameGroup">重命名</button>
			  <button action="deleteGroup">删除</button>
		  </div>
		  <div class="adm-member-list"></div>
		</div>
		<div class="clearfix"></div>
	  </div>
	  <!-- Groups Panel end -->
	  
	  <!-- Account Panel begin -->
	  <div id="accountPanel" class="adm-tab" >
	  </div>
	  <!-- Account Panel end -->
	  
	  <!-- Notification Panel begin -->
	  <div id="notificationPanel" class="adm-tab" >
	    <div class="adm-member-toolbar" style="height:26px;padding:13px 16px;">
          <button>发送消息</button>
		</div>
		<div class="adm-member-header">
		  <div class="col col-photo">&#160;</div>
		  <div class="col col-role" style="width:100px;">类型</div>
		  <div class="col col-user" style="width:100px;">发件人</div>
		  <div class="col col-title" style="width:50%;">标题</div>
		  <div class="clear"></div>
		</div>
		<div class="adm-member-body"></div>
	  </div>
	  <!-- Notification Panel end -->
	  
	</div>
  </div>
</body>
<script id="groupItemTpl" type="text/x-jsrender"
  <div></div>
  <div>
	<div>{{:group_name}}</div>
	<div>{{:count}}个成员</div>
  </div>
</script>
<script id="memberItemTpl" type="text/x-jsrender">   
  <div class="col col-photo">
	<img src="images/role.jpg">
  </div>
  <div class="col col-member">
	<div class="name" title="{{:user_name}}">
	  <span>{{:user_name}}</span>
	  <i class="icon16x16 profile_card gktooltip" data-original-title="<ul class='member_profile_list'><li class='email'><i class='icon16x16'></i><span>45425168@qq.com</span></li></ul>"></i>
	</div>
	<div class="tags">
	  <span class="tag" groupId="{{:group_id}}">{{:group_id}}</span>
	  <a class="edit_group dropdown__together" href="javascript:void(0)" action="group">修改分组</a>
	  <ul class="scrollbar dropdown_menu edit_group_wrapper">
	</div>
  </div>
  <div class="col col-mail">{{:email}}</div>
  <div class="col col-role">{{if user_type == 1 }}管理员{{else}}普通成员{{/if}}</div>
  <div class="col col-space">
  <span class="td capacity_used">
	<em>
	  <strong>GB / </strong>
	</em>
	</span>
	<span class="td capacity_quota">
	  <em>
	   <strong>
		{{:total_space}}GB
		<i class="why gktooltip" title="未分配空间，正在使用团队剩余空间"></i>
	   </strong>
	  </em>
	</span>
  </div>
  <div class="col col-action">-</div>
  <div class="clear"></div>
</script>
<script id="simpleMemberItemTpl" type="text/x-jsrender">   
  <div class="col col-photo">
	<img src="images/role.jpg">
  </div>
  <div class="col col-member">
	<div class="name" title="{{:user_name}}">
	  <span>{{:user_name}}</span>
	  <i class="icon16x16 profile_card gktooltip" data-original-title="<ul class='member_profile_list'><li class='email'><i class='icon16x16'></i><span>45425168@qq.com</span></li></ul>"></i>
	</div>
	<div class="tags">
	  <span class="tag" groupId="{{:group_id}}">{{:group_id}}</span>
	</div>
  </div>
  <div class="col col-action"><a href="javascript:void(0)" action="moveMember">移出此组</a></div>
  <div class="clear"></div>
</script>
<script id="notificationItemTpl" type="text/x-jsrender">   
  <div class="col col-photo">
	<img src="images/role.jpg">
  </div>
  <div class="col col-role" style="width:100px;">{{if from_user_id == 1 }}系统消息{{else}}私信{{/if}}</div>
  <div class="col col-from" data-id="{{:from_user_id}}" style="width:100px;">{{:from_user_name}}</div>
  <!-- <div class="col col-to" data-id="{{:to_user_id}}" style="width:100px;">{{:to_user_name}}</div> -->
  <div class="col col-title" style="width:50%;">{{:title}}</div>
  <div class="col col-action"><button action="reply">回复</button><button style="margin-left:10px;" action="delete">删除</button></div>
  <div class="clear"></div>
  <div class="notification-content">{{:content}}</div>
</script>
<!-- template end here -->
<!-- third party lib start here -->
<script src="js/lib/jquery-1.9.1.js"></script>
<script src="js/lib/jquery.placeholder.js"></script>
<script src="js/lib/jsrender.js"></script>
<script src="js/lib/highcharts.js"></script>
<script src="js/lib/bootstrap-select.js"></script>
<!-- third party lib end here -->
<script src="js/Setting.js"></script>
<script src="js/Util.js"></script>
<script src="js/MessageDialog.js"></script>
<script src="js/Window.js"></script>
<script src="js/SessionManager.js"></script>
<script src="js/MemberPanel.js"></script>
<script src="js/ProfilePanel.js"></script>
<script src="js/GroupsPanel.js"></script>
<script src="js/FoldersPanel.js"></script>
<script src="js/AccountPanel.js"></script>
<script src="js/NotificationPanel.js"></script>
<script src="js/AdminBoard.js"></script>
<script src="js/main.js"></script>
</html>